<route lang="yaml">
meta:
  title: 字幕格式化
</route>

<script setup lang="ts">
import { ElNotification } from 'element-plus'

// 字幕功能模型
const subtitleModel = ref({
  inputSubtitles: '',
  resultSubtitles: '',
})

function processSubtitles(input: string) {
  const punctuationRegex = /[!"# $ %&'()*+,\-./:;<=>?@[\\ $ ^_`{|}～]/g
  subtitleModel.value.resultSubtitles = input.replaceAll(' ', '\n').replaceAll(punctuationRegex, '')
}

function copyResult(result: string) {
  navigator.clipboard.writeText(result)
  ElNotification({
    title: '复制成功',
    message: '结果复制到剪切板，直接[ctrl+v]可粘贴',
    type: 'success',
  })
}

function clear() {
  subtitleModel.value.resultSubtitles = ''
  subtitleModel.value.inputSubtitles = ''
}
</script>

<template>
  <div>
    <FaPageHeader>
      <template #title>
        <div class="flex items-center gap-4">
          💗字幕格式化💗
        </div>
      </template>
      <template #description>
        <div class="text-sm/6">
          <div>
            功能：可以将字幕文本根据空格进行换行，解决导入剪映字幕的时候会出现一行字数过多换行问题。
          </div>
        </div>
      </template>
    </FaPageHeader>
    <FaPageMain>
      <el-input v-model="subtitleModel.inputSubtitles" placeholder="请粘贴需要处理的字幕..." :rows="10" type="textarea" />
    </FaPageMain>
    <FaPageMain>
      <el-button type="primary" size="large" @click="processSubtitles(subtitleModel.inputSubtitles)">
        处理文本
      </el-button>
      <el-button type="success" size="large" @click="copyResult(subtitleModel.resultSubtitles)">
        复制结果
      </el-button>
      <el-button type="warning" size="large" @click="clear">
        清空内容
      </el-button>
    </FaPageMain>
    <FaPageMain>
      <el-input v-model="subtitleModel.resultSubtitles" :disabled="true" placeholder="结果..." :rows="10" type="textarea" />
    </FaPageMain>
  </div>
</template>
